<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"> </script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"> </script>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="24">
                <!-- 放搜索条件
                 :inline="true" 使菜单水平
                 :model="formInline" 双向绑定对象,可不写
                 -->
                <el-form :inline="true">
                    <el-form-item label="楼栋号">
<!--                        循环楼栋号-->
                      <el-select placeholder="请选择楼栋" v-model="param.buildingId">
                        <el-option :label="b.numbers" :value="b.id" v-for="b in building"></el-option>
                    </el-select>
                    </el-form-item>

                    <el-form-item label="手机号">
                        <el-input  placeholder="手机号" v-model="param.tel"></el-input>
                      </el-form-item>

                      <el-form-item label="账号">
                        <el-input  placeholder="账号" v-model="param.username"></el-input>
                      </el-form-item>

                    <el-form-item>
                      <el-button type="primary" @click="queryOwnerInfo">查询</el-button>
                    </el-form-item>
                  </el-form>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <!-- 放功能按钮 -->
                <el-button type="primary" @click="addOwnerBtn">新增</el-button>
                <el-button type="danger" @click="batchDelOwner">批量删除</el-button>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <!-- 放表格数据 
                 el-table-column:列标签
                 1.用表格的data属性绑定数据 显示数据
                 2.用列标签的prop属性绑定数据对象的属性
                 3.对表格的数据个性化处理,用插槽进行添加
                -->

<!--                @selection-change多选框点击事件-->
                <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                 type="selection"
                 width="55">
                </el-table-column>

                <el-table-column
                  prop="username"
                  label="账号"
                  width="180">
                </el-table-column>

                <el-table-column
                  prop="gender"
                  label="性别">
                  <template slot-scope="scope">
                    <span style="color: blue;">{{scope.row.gender == '1'?'男':'女'}}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="tel"
                  label="联系方式"
                  width="180">
                </el-table-column>

                <el-table-column
                  prop="identity"
                  label="身份证">
                </el-table-column>

                <el-table-column
                  label="操作">
<!--                    插槽-->
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="updateOwnerBtn(scope.row.id)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="delOwnerBtn(scope.row.id)"></el-button>
                        <el-button type="info" circle @click="queryDetailBtn(scope.row.id)">查询详细</el-button>
                    </template>
                </el-table-column>
                
              </el-table>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <!-- 放分页
                layout:显示分页的内容
                :page-size="5" 设置初始为每页5条
                -->
                <el-pagination
                background
                :page-sizes="[3, 5, 10, 30]"
                :page-size="pageSize"
                :current-page="pageNum"
                layout="prev, pager, next, total, sizes"
                :total="total"
                @next-click="nextPage"
                @prev-click="prevPage"
                @current-change="changePage"
                @size-change="changeSize">
              </el-pagination>
            </el-col>
        </el-row>


<!--     新增的弹窗开始-->
        <el-dialog title="新增业主" :visible.sync="addOwnerForm">
            <el-form>
                <el-form-item label="用户名" label-width="80px">
                    <el-input v-model="addOwner.username"></el-input>
                </el-form-item>
                <el-form-item label="姓名" label-width="80px">
                    <el-input v-model="addOwner.realName"></el-input>
                </el-form-item>
                <el-form-item label="电话" label-width="80px">
                    <el-input v-model="addOwner.tel"></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="80px">
                    <el-radio  label="1" v-model="addOwner.gender">男</el-radio>
                    <el-radio  label="2" v-model="addOwner.gender">女</el-radio>
                </el-form-item>
                <el-form-item label="身份证" label-width="80px">
                    <el-input v-model="addOwner.identity"></el-input>
                </el-form-item>
                <el-form-item label="选择房屋" label-width="80px">
                    <el-select placeholder="请选择房屋" v-model="addOwner.houseId">
                        <el-option :label="h.numbers" :value="h.id" v-for="h in houses"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" label-width="80px">
                    <el-input type="textarea" v-model="addOwner.remarks"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addOwnerForm=false">取 消</el-button>
                <el-button type="primary" @click="saveOwner">确 定</el-button>
            </div>
        </el-dialog>
<!--     新增的弹窗结束-->

<!--        修改弹窗的开始-->
        <el-dialog title="修改业主" :visible.sync="updateOwnerForm">
            <el-form>
                <el-form-item>
                    <el-input v-show="false" v-model="selectUpdaOwner.id"></el-input>
                </el-form-item>
                <el-form-item label="用户名" label-width="80px">
                    <el-input v-model="selectUpdaOwner.username"></el-input>
                </el-form-item>
                <el-form-item label="姓名" label-width="80px">
                    <el-input v-model="selectUpdaOwner.realName"></el-input>
                </el-form-item>
                <el-form-item label="电话" label-width="80px">
                    <el-input v-model="selectUpdaOwner.tel"></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="80px">
                    <el-radio  :label="1" v-model="selectUpdaOwner.gender" >男</el-radio>
                    <el-radio  :label="0" v-model="selectUpdaOwner.gender">女</el-radio>
                </el-form-item>
                <el-form-item label="身份证" label-width="80px">
                    <el-input v-model="selectUpdaOwner.identity"></el-input>
                </el-form-item>
                <el-form-item label="选择房屋" label-width="80px">
                    <el-select placeholder="请选择房屋"  v-model="selectUpdaOwner.houseId">
                        <el-option :label="h.numbers" :value="h.id" v-for="h in houses"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" label-width="80px">
                    <el-input type="textarea" v-model="selectUpdaOwner.remarks"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateOwnerForm=false">取 消</el-button>
                <el-button type="primary" @click="saveUpdate">确 定</el-button>
            </div>
        </el-dialog>
<!--        修改弹窗的结束-->

        <!--     详细信息的弹窗开始-->
        <el-dialog title="新增业主" :visible.sync="OwnerInfoForm">
            <el-form>
                <el-form-item label="用户名" label-width="80px">
                    <el-input v-model="ownerInfo.username"></el-input>
                </el-form-item>
                <el-form-item label="姓名" label-width="80px">
                    <el-input v-model="ownerInfo.realName"></el-input>
                </el-form-item>
                <el-form-item label="电话" label-width="80px">
                    <el-input v-model="ownerInfo.tel"></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="80px">
                    <el-radio  :label="1" v-model="ownerInfo.gender" >男</el-radio>
                    <el-radio  :label="0" v-model="ownerInfo.gender">女</el-radio>
                </el-form-item>
                <el-form-item label="身份证" label-width="80px">
                    <el-input v-model="ownerInfo.identity"></el-input>
                </el-form-item>
                <el-form-item label="房屋" label-width="80px">
                    <el-input v-model="ownerInfo.houseName"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" label-width="80px">
                    <el-input v-model="ownerInfo.createTime"></el-input>
                </el-form-item>
                <el-form-item label="备注" label-width="80px">
                    <el-input type="textarea" v-model="ownerInfo.remarks"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="OwnerInfoForm=false">关 闭</el-button>
            </div>
        </el-dialog>
        <!--     详细信息的弹窗开始-->

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span>是否确定删除</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveDelOwner">确 定</el-button>
            </span>
        </el-dialog>

    </div>


    <script>
        new Vue({
            el:'#app',
            data:{
                tableData: [
                ],
                param:{
                    buildingId:'',
                    tel:'',
                    username:''
                },
                building:[],
                pageSize:5,
                pageNum:1,
                total:0,
                addOwnerForm:false,  //隐藏弹窗
                updateOwnerForm:false,
                addOwner:{},
                houses:[],
                selectData:[],
                selectUpdaOwner:{},
                dialogVisible:false,
                OwnerInfoForm:false,
                delId:'',
                ownerInfo:'',
            },
            methods:{
                //查询业主信息
                queryOwner(){
                    let pageData={};
                    pageData.pageSize=this.pageSize
                    pageData.pageNum=this.pageNum
                    pageData.param=this.param

                    axios.post("/owner/queryOwner",pageData).then(resp=>{
                        console.log(resp.data)
                        if(resp.data.code==200){
                            this.tableData=resp.data.data.list
                            this.total=resp.data.data.total
                        }
                    })
                },

                queryBuilding(){
                    //查询楼栋下拉框
                    axios.get('/building/queryBuild').then(resp=>{

                        if(resp.data.code==200){
                            this.building=resp.data.data
                        }
                    })
                },

                updateOwnerHouse(){
                    //查询未入住的房屋信息
                    axios.get('/housing/queryHouse')
                        .then(resp=>{
                            if(resp.data.code==200){
                                this.houses=resp.data.data
                            }
                        })
                },

                addOwnerBtn(){
                    //查询未入住的房屋信息
                    axios.get('/housing/queryHouse')
                        .then(resp=>{
                            //console.log(resp.data)
                            if(resp.data.code==200){
                                this.houses=resp.data.data
                                this.addOwnerForm=true
                            }
                        })
                },

                saveOwner(){
                    axios.post('/owner/saveOwner',this.addOwner)
                        .then(resp=>{
                            // console.log(resp.data)
                            if(resp.data.code==200){
                                this.addOwnerForm=false
                                this.$message({
                                    showClose: true,
                                    message: '恭喜你，这是一条成功消息',
                                    type: 'success'
                                });
                                this.queryOwner()
                            }
                        })
                },
                handleSelectionChange(val){
                    //多选框点击事件 val是多选框选中的对象数组
                    // console.log(val)
                    this.selectData=val
                },
                batchDelOwner(){
                  //批量删除
                    this.$confirm('是否继续删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        //发送删除请求
                        // 怎么得到选中的id数组
                        let ids=[]
                        this.selectData.forEach(e=>{
                            ids.push(e.id)
                        })
                        axios.post('/owner/batchDelOwner',ids)
                            .then(resp=>{
                                if(resp.data.code==200){
                                    if(resp.data.data==true){
                                        this.$message({
                                            type: 'success',
                                            message: '删除成功!'
                                        });
                                        this.dialogVisible = false
                                        this.queryOwnerInfo()
                                    }else {
                                        this.$message({
                                            type: 'warning',
                                            message: '删除失败，请缴纳费用或退房'
                                        });
                                        this.dialogVisible = false
                                    }
                                }
                            })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },

                updateOwnerBtn(id){
                    // console.log(id)
                    this.updateOwnerForm=true;
                    axios.get("/owner/updateOwnerBtn/"+id).then(resp=>{
                        if(resp.data.code==200){
                            this.selectUpdaOwner=resp.data.data
                            this.updateOwnerHouse()
                        }
                    })
                },

                saveUpdate(){
                    this.selectUpdaOwner.id
                    axios.post('/owner/saveUpdate',this.selectUpdaOwner).then(resp=>{
                        if(resp.data.code==200){
                            this.updateOwnerForm=false
                            this.$message({
                                showClose: true,
                                message: '恭喜你，更改成功',
                                type: 'success'
                            });
                            this.queryOwner()
                        }
                    })
                },
                delOwnerBtn(id){
                    this.dialogVisible = true
                    this.delId=id
                },
                saveDelOwner(){
                    axios.get('/owner/saveDelOwner/'+this.delId).then(resp=>{
                        if(resp.data.code==200){
                            if(resp.data.data==true){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.dialogVisible = false
                                this.queryOwnerInfo()
                            }else {
                                this.$message({
                                    type: 'warning',
                                    message: '删除失败，请缴纳费用或退房'
                                });
                                this.dialogVisible = false
                            }

                        }
                    })
                },
                queryDetailBtn(id){
                    axios.get("/owner/queryDetailBtn/"+id).then(resp=>{
                        this.OwnerInfoForm=true
                        if (resp.data.code == 200) {
                            this.ownerInfo=resp.data.data

                        }
                    })
                },

                //下一页方法
                nextPage(val){
                    //回调参数val,val等于当前页码
                    this.pageNum=val
                    this.queryOwner()
                },
                //上一页方法
                prevPage(val){
                    //回调参数val,val等于当前页码
                    this.pageNum=val
                    this.queryOwner()
                },
                changePage(val){
                    this.pageNum=val
                    this.queryOwner()
                },
                changeSize(val){
                    this.pageNum=1
                    this.pageSize=val
                    this.queryOwner()
                },
                queryOwnerInfo(){
                    this.pageNum=1
                    this.queryOwner()
                }
            },
            created(){
                this.queryOwner()
                this.queryBuilding()

            }
        })
    </script>
</body>
</html>